:root {
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --btn-radius: 6px;
    --accent: #007acc;
    --btn-bg: #f0f0f0;
    --btn-hover: limegreen;
}

dialog {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);

    width: 90%;
    max-width: 400px;
    
    /* display: block; */
    padding: var(--space-md);
    /* margin: auto; */

    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

dialog::backdrop {
    background-color: black;
    opacity: 0.6;
}
  
#version-title {
    font-family: "Cheese";
    margin-bottom: var(--space-md);
} 

  

.version-list {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0;
}

.version-list button, .version-button {
    font-family: "Candy";
    font-size: 1.5rem;
    
    display: block;
    width: 100%;
    margin-bottom: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--btn-radius);
    background-color: var(--btn-bg);
    border: 1px solid #ddd;
}

/* .version-button{
    background-color: var(--btn-bg);
} */

.version-list button:hover {
    background-color: var(--btn-hover);
    /* opacity: 0.8; */
}

.version-button.selected{ 
    /* .highlight-version-button{ */
    background-color: deepskyblue;
}


.dialog-close-button {

    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    
    color: #555;
    background-color: var(--btn-bg);
    background: none;
    
    border: none;
    border-radius: var(--btn-radius);
    
    font-size: 1.5rem;
    padding: var(--space-sm) var(--space-md);

    line-height: 1;
    cursor: pointer;
}
  
.dialog-close-button:hover {
    background-color: var(--btn-hover);
    background-color: hotpink;
}